<template>
  <div>
    <div class="block">
        <input type="text" v-model="firstName"><br>
        <input type="text" v-model="lastName"><br>
        <h2>{{fullName}}</h2>
    
   

    </div>
  </div>
</template>

<script>

export default {
  name: "home",
  
  data() {
    return {
          firstName: '张',
          lastName: '三',
          fullName: '张三'
    };
  },
   watch: {
                // 侦听器以函数的形式定义，函数名称就是监视的数据的名称，参数就是数据变化后的新值
                firstName(val) {
                    console.log(val);
                    this.fullName = val + this.lastName;
                },
                lastName(val) {
                    console.log(val);
                    this.fullName = this.firstName + val;
                }
  },

  methods: {
    
  },
};
</script>

